<!DOCTYPE html>
<html lang="en">

    <!-- Basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

     <!-- Site Metas -->
    <title>猫眼Top100数据分析</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Site Icons -->
    <link rel="shortcut icon" href="/static/images/favicon.png" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Site CSS -->
    <link rel="stylesheet" href="/static/style.css">
    <!-- ALL VERSION CSS -->
    <link rel="stylesheet" href="/static/css/versions.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/static/css/custom.css">

	<script src="/static/js/modernizr.custom.79639.js"></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond./static/js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body class="seo_version">

	<!-- LOADER -->
	<div id="preloader">
		<div class="loader-wrapper">
			<div class="loader-new">
				<div class="ball"></div>
				<div class="ball"></div>
				<div class="ball"></div>
			</div>
			<div class="text">LOADING...</div>
		</div>
	</div>
	<!-- END LOADER -->

	<!-- Start header -->
	<header class="top-navbar">
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container">
                <a class="navbar-brand" href="/index">
					<img src="/static/images/logo-seo.png" alt="" />
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars-seo" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbars-seo">
					<ul class="navbar-nav ml-auto">
{#						<li class="nav-item active"><a class="nav-link" href="/templates/temp.html">Home</a></li>#}
						<li class="nav-item"><a class="nav-link" href="/index">首页</a></li>
						<li class="nav-item"><a class="nav-link" href="/hot100">100之最</a></li>
						<li class="nav-item"><a class="nav-link" href="/top10">top10分析</a></li>
						<li class="nav-item"><a class="nav-link" href="/word">词云图</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>
	<!-- End header -->
    <div class="container">
        <div>
            <h3>猫眼Top100数据分析</h3>
            <table class="table table-hover">
            <tr>
                <td>排名</td>
                <td>图片</td>
                <td>电影中文名称</td>
                <td>主演</td>
                <td>上映年份</td>
                <td>评分</td>
            </tr>

            {% for movie in movies %}
             <tr>
                <td>{{movie[0]}}</td>
                <td><img src={{ movie[1] }} height="50" width="50"></td>
                <td>
                    <a href="{{ movie[1] }}" target="_blank" class="my-link">
                        {{movie[2]}}
                    </a>
                </td>
                <td>{{movie[3]}}</td>
                <td>{{movie[4]}}</td>
                <td>{{movie[5]}}</td>
            </tr>
            {% endfor %}
        </table>
        </div>
        <div>
            <h3>top影片数据分析</h3>
            <div id="top10_img" style="width: 600px;height:400px;"></div>
        </div>



    </div><!-- end container -->
</div><!-- end section -->

        </div><!-- end container -->
    </div><!-- end section -->

    <div class="copyrights">
        <div class="container">
            <div class="footer-distributed">
                <div class="footer-left">
                    <p class="footer-company-name">Copyright &copy; 杨思思</p>
                </div>
            </div>
        </div><!-- end container -->
    </div><!-- end copyrights -->

    <a href="#" id="scroll-to-top" class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>

    <!-- ALL JS FILES -->
    <script src="/static/js/all.js"></script>
    <!-- ALL PLUGINS -->
	<script src="/static/js/tippy.all.min.js"></script>
    <script src="/static/js/custom.js"></script>

	<script src="/static/js/jquery.ba-cond.min.js"></script>
	<script src="/static/js/jquery.slitslider.js"></script>
	<script src="/static/js/echarts.min.js"></script>
	<script src="/static/js/macarons.js"></script>
	<script type="text/javascript">
			$(function() {

				var Page = (function() {

					var $nav = $( '#nav-dots > span' ),
						slitslider = $( '#slider' ).slitslider( {
							onBeforeChange : function( slide, pos ) {

								$nav.removeClass( 'nav-dot-current' );
								$nav.eq( pos ).addClass( 'nav-dot-current' );

							}
						} ),

						init = function() {

							initEvents();

						},
						initEvents = function() {

							$nav.each( function( i ) {

								$( this ).on( 'click', function( event ) {

									var $dot = $( this );

									if( !slitslider.isActive() ) {

										$nav.removeClass( 'nav-dot-current' );
										$dot.addClass( 'nav-dot-current' );

									}

									slitslider.jump( i + 1 );
									return false;

								} );

							} );

						};

						return { init : init };

				})();

				Page.init();

			});
		</script>

		<script>
			tippy('.btn-a')
		</script>

    <script type="text/javascript">
        var jsonData = {{ dd|tojson|safe }};
        var data = JSON.parse(jsonData);
        console.log(data)
        // 获取电影名称和评分
        var movies = data.movies;
        var ratings = data.ratings;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('top10_img'), 'macarons');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '猫眼top10分析'
            },
            tooltip: {},
            legend: {
                data:['评分']
            },
            xAxis: {
                data: movies
            },
            yAxis: {},
            series: [{
                name: '评分',
                type: 'line',
                data: ratings,
                areaStyle: {
                    color: '#ff0',
                    opacity: 0.5
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


</body>
</html>